<template>
  <div class="">
    <el-card class="box-card" shadow="never">
      <el-button
        size="small"
        style="margin-left: 15px"
        icon="el-icon-plus"
        class="iconadd"
        @click="handleAdd"
        >新增</el-button
      >
      <div class="content">
        <el-table
          :data="data"
          height="calc(55vh - 2px)"
          :header-cell-style="headerStyle"
          class="table"
        >
          <el-table-column align="center" label="序号" type="index" width="80">
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="指令名称"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="identifier"
            label="指令标识符"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="commandInfo"
            label="指令内容"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="management"
            label="操作"
            width="150"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                placement="bottom"
              >
                <i
                  @click="onEdit(scope.row)"
                  class="iconfont tianxie tableBtnIcon"
                ></i>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="bottom"
              >
                <i
                  @click="onDel(scope.row.id)"
                  class="iconfont shanchu tableBtnIcon"
                ></i>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <addInstruction
      ref="addInstructionRef"
      :deviceType="deviceType"
      :model="model_update"
      :thingModelId="thingModelId"
      :editInfo="editInfo"
    />
    <!-- <editInstruction
      ref="editInstructionRef"
      :deviceType="deviceType"
      :model="model_update"
      :editInfo="editInfo"
    /> -->
  </div>
</template>

<script>
// import FunctionDetail from "./modeuls/functionDetail.vue";
import tableStyleMixin from "@mixin/table-style";
import { reqThingModel } from "@/api/rule";
import addInstruction from "./addInstruction.vue";
import editInstruction from "./editInstruction.vue";
import { reqthingCommandList, reqThingCommandDel } from "@/api/model";

export default {
  props: {
    deviceType: {
      type: String,
      default: "",
    },
    model: {
      type: Object,
      default: () => ({}),
    },
    thingModelId: {
      type: String,
      default: "",
    },
  },
  components: {
    addInstruction,
    editInstruction,
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      total: 0,
      page: {
        pageSize: 10,
        pageNum: 1,
      },
      query: {},
      loading: false,
      functionDetailRef: null,
      column: [
        {
          label: "功能类型",
          key: "type",
        },
        {
          label: "指令名称",
          key: "name",
        },
        {
          label: "描述",
          key: "description",
        },
        {
          label: "单位",
          key: "unit",
        },
        {
          label: "图标",
          key: "iconId",
          slot: true,
        },
        {
          label: "标识符",
          key: "identifier",
        },
        {
          label: "数据类型",
          key: "dataType",
          slot: true,
        },
        {
          label: "数据定义",
          key: "params",
          slot: true,
        },
      ],
      data: [],
      model_update: {},
      editInfo: {},
    };
  },
  computed: {},
  watch: {
    // model: {
    //   handler(newV) {
    //     // if (newV) this.getInfo(newV);
    //   },
    //   deep: true,
    //   immediate: true,
    // },
  },
  methods: {
    handleAdd() {
      this.editInfo = {};
      this.model_update = JSON.parse(JSON.stringify(this.model));
      this.$refs.addInstructionRef.dialogVisible = true;
    },
    onEdit(row) {
      this.model_update = JSON.parse(JSON.stringify(this.model));
      this.editInfo = JSON.parse(JSON.stringify(row));
      this.$refs.addInstructionRef.dialogVisible = true;
    },
    async onDel(id) {
      const result = await this.$confirm("是否确认删除该配置?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch(() => {});
      if (result !== "confirm") return;
      let res = await reqThingCommandDel(id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("操作成功");
      this.getInstructionList();
    },
    async getInstructionList() {
      let res = await reqthingCommandList({
        thingModelId: this.thingModelId,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.data = res.data.list;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("~@views/style/tablePage.less");

::v-deep .el-card__body {
  padding: 0;
}

.box-card {
  min-height: 55vh;
  overflow-y: auto;
}

::v-deep .el-card__body {
  min-height: 55vh;
  overflow-y: auto;
}

.content {
  min-height: 55vh;
  overflow-y: auto;
}

.iconadd {
  background: #7367f0;
  color: #fff;
  border: none;
  margin: 15px 0 0 15px;
}
.tableBtnIcon {
  font-size: 18px;
  cursor: pointer;
  margin: 0 10px;
}
// 禁用鼠标移入时的背景色变化
::v-deep .el-table .el-table__body-wrapper tbody tr:hover > td {
  background-color: transparent !important; /* 使用 !important 确保覆盖 */
}
</style>
